const s = {
  v: `
          attribute vec4 a_position;
          attribute float a_pointSize;
          void main() {
              gl_Position = a_position;
              gl_PointSize = a_pointSize;
          }
      `,
  f: `
      precision mediump float;
      void main() {
          gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
      }
      `,
}
// 得到着色器程序
const program = getProgram(gl, s)
// 获取着色器程序中的变量
const a_position = gl.getAttribLocation(program, "a_position")
const a_pointSize = gl.getAttribLocation(program, "a_pointSize")
// 设置变量的值
function init() {
  //TODO 创建顶点数据
  const positionData = new Float32Array([0.0, 0.0, -0.5, 0.5, 0.5, -0.5])
  const pointSizeData = new Float32Array([20.0, 10.0, 30.0])
  // 创建缓冲对象
  const positionBuffer = gl.createBuffer()
  // 绑定缓冲对象
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
  // 填充缓冲对象
  gl.bufferData(gl.ARRAY_BUFFER, positionData, gl.STATIC_DRAW)
  // 配置变量
  gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0)
  // 启用变量
  gl.enableVertexAttribArray(a_position)

  // 创建缓冲对象
  const sizeBuffer = gl.createBuffer()
  // 绑定缓冲对象
  gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer)
  // 填充缓冲对象
  gl.bufferData(gl.ARRAY_BUFFER, pointSizeData, gl.STATIC_DRAW)
  // 配置变量
  gl.vertexAttribPointer(a_pointSize, 1, gl.FLOAT, false, 0, 0)
  // 启用变量
  gl.enableVertexAttribArray(a_pointSize)

  // 绘制程序
  gl.drawArrays(gl.POINTS, 0, 3)
}
// init()
//  优化版
function initPro() {
  //TODO 创建顶点数据
  const points = new Float32Array([
    0.0, 0.0, 20.0, -0.5, 0.5, 10.0, 0.5, -0.5, 30.0,
  ])
  // 创建缓冲对象
  const buffer = gl.createBuffer()
  // 绑定缓冲对象
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
  // 填充缓冲对象
  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW)
  // points的每一个数据占据的字节数
  const BYTES = points.BYTES_PER_ELEMENT
  // 配置变量
  // (glsl变量名, 变量类型, 变量是否是整数, 变量是否是矩阵, 变量矩阵的列数[0.0, 0.0, 20.0], 变量在缓冲对象中的偏移量)
  //   变量矩阵的列数 : 两个数据之间的字节数
  gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, BYTES * 3, 0)
  // 启用变量
  gl.enableVertexAttribArray(a_position)

  // 配置变量
  // (glsl变量名, 变量类型, 变量是否是整数, 变量是否是矩阵, 变量矩阵的列数[0.0, 0.0, 20.0], 变量在缓冲对象中的偏移量[_,_,20.0])
  gl.vertexAttribPointer(a_pointSize, 1, gl.FLOAT, false, BYTES * 3, BYTES * 2)
  // 启用变量
  gl.enableVertexAttribArray(a_pointSize)

  // 绘制程序
  gl.drawArrays(gl.POINTS, 0, 3)
}
initPro()
